<template>
  <div class="daily-report-container">
    <!-- 页面头部 -->
    <div class="page-header">
      <h1>工作问题反馈</h1>
      <button class="new-report-btn" @click="handleCreateDaily">新建问题反馈</button>
    </div>

    <!-- 搜索表单 -->
    <div class="search-form">
      <div class="form-row">
        <div class="form-item">
          <label>站点：</label>
          <select v-model="searchForm.siteId">
            <option value="">全部</option>
            <option 
              v-for="site in siteOptions.filter(site => site.siteName !== '全站')" 
              :key="site.id" 
              :value="site.id"
            >
              {{ site.siteName }}
            </option>
          </select>
        </div>
        <div class="form-item">
          <label>状态：</label>
          <select v-model.number="searchForm.state">
            <option 
              v-for="option in stateOptions" 
              :key="option.id" 
              :value="option.id"
            >
              {{ option.name }}
            </option>
          </select>
        </div>
        <div class="form-item">
          <label>机器编号：</label>
          <el-select
            v-model="searchForm.equipmentIds"
            multiple
            filterable
            collapse-tags
            collapse-tags-tooltip
            placeholder="全部"
            clearable
          >
            <el-option 
              v-for="machine in machineOptions" 
              :key="machine.id" 
              :label="machine.equipmentName" 
              :value="machine.id"
            />
          </el-select>
        </div>
      </div>

      <div class="form-row">
        <div class="form-item">
          <label>模块：</label>
          <select v-model="searchForm.moduleId">
            <option value="">全部</option>
            <option v-for="module in moduleOptions" :key="module.id" :value="module.id">{{ module.moduleName }}</option>
          </select>
        </div>
        <div class="form-item">
          <label>部件：</label>
          <select v-model="searchForm.componentId">
            <option value="">全部</option>
            <option v-for="component in componentOptions" :key="component.id" :value="component.id">{{ component.componentName }}</option>
          </select>
        </div>
        <div class="form-item">
          <label>Keyword：</label>
          <input type="text" v-model="searchForm.keyword" placeholder="请输入关键字">
        </div>
      </div>

      <!-- <div class="form-row">
       
        <div class="form-item">
          <label>开始时间：</label>
          <input type="date" v-model="searchForm.startTime">
        </div> 
        <div class="form-item">
          <label>结束时间：</label>
          <input type="date" v-model="searchForm.endTime">
        </div>
      </div> -->

      <div class="form-actions">
        <button @click="handleSearch" class="search-btn">搜索</button>
        <button @click="handleReset" class="reset-btn">重置</button>
      </div>
    </div>

    <!-- 分页组件 -->
    <div class="pagination-container">
      <el-pagination
        v-model:current-page="pagination.currentPage"
        v-model:page-size="pagination.pageSize"
        :page-sizes="[10, 20, 50, 100]"
        :total="pagination.total"
        layout="total, sizes, prev, pager, next, jumper"
        @size-change="handlePageSizeChange"
        @current-change="handlePageChange"
      />
    </div>

    <!-- 问题反馈列表 -->
    <div class="list-section">
      <div v-if="isLoading" class="state-message">
        加载中...
      </div>
      <div v-else-if="!dailyReports.length" class="state-message">
        暂无问题反馈数据
      </div>
      <div v-else class="reports-list">
        <div 
          v-for="report in dailyReports" 
          :key="report.id" 
          class="report-item"
          :class="{
            'unsolved': report.state === 1,
            'in-progress': report.state === 2, 
            'resolved': report.state === 3,
            'closed': report.state === 4
          }"
        >
          <div class="report-header">
            <div class="header-main">
              <h3>{{ report.title }}</h3>
              <span class="state-tag" :class="`state-${report.state}`">
                {{ getStateText(report.state) }}
              </span>
              
            </div>
            <div class="header-tags">
              <span class="tag module-tag">{{ report.module.moduleName }}</span>
            </div>
          </div>
          <div class="report-info">
            <div class="info-row">
              <span>机器编号：{{ report.equipment.equipmentName }}</span>
              <span>部件：{{ report.component.componentName }}</span>
            </div>
            <div class="info-row">
              <span>发生时间：{{ formatDateTime(report.happendTime) }}</span>
              <span>记录人：{{ report.user.realname }}</span>
            </div>
          </div>
          <div class="report-content">
            <div class="content-section">
              <p class="report-summary">{{ getSummary(report.description) }}</p>
              <button class="text-btn" @click="openDetailDrawer(report)">查看详情</button>
            </div>
          </div>
          <div class="report-footer">
            <div class="attachments" v-if="report.attachments?.length">
              <span 
                v-for="file in report.attachments"
                :key="file.id || file.fileUrl"
                class="attachment"
                @click="handleDownload(file.fileUrl, file.fileName)"
              >
                📎 {{ file.fileName || '附件' }}
              </span>
            </div>
            <div class="actions">
              <button class="action-btn detail" @click="openDetailDrawer(report)">查看详情</button>
              <button 
                v-if="report.task === 0 && (isAdmin || role === 0)" 
                class="action-btn assign"
                @click="handleAssignTask(report)"
              >
                分配任务
              </button>
              <el-button 
                v-if="report.task === 1" 
                type="success"
                @click="handleViewTask1(report)"
              >
                任务详情
              </el-button>
              <button class="action-btn edit" @click="handleEdit(report)" v-if="(isAdmin || userId === report.logUserId)">编辑</button>
              <button class="action-btn delete" @click="handleDelete(report)"  v-if="(isAdmin || userId === report.logUserId)">删除</button>
              <button 
                class="share-btn"
                @click="handleShare(report.id)"
              >
                <i class="el-icon-share"></i>
                分享
              </button>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 分页组件 -->
    <div class="pagination-container">
      <el-pagination
        v-model:current-page="pagination.currentPage"
        v-model:page-size="pagination.pageSize"
        :page-sizes="[10, 20, 50, 100]"
        :total="pagination.total"
        layout="total, sizes, prev, pager, next, jumper"
        @size-change="handlePageSizeChange"
        @current-change="handlePageChange"
      />
    </div>

    <!-- 问题反馈编辑器组件 -->
    <DailyEditor
      v-model:visible="showEditor"
      :edit-data="editData"
      :is-edit="!!editData"
      @refresh="handleRefresh"
    />
    <TaskAssignDialog
      v-model:visible="taskDialogVisible"
      :report-data="{
        id: currentReport?.id,
        title: currentReport?.title,
        content: currentReport?.content,
        dailyId: currentReport?.id  // 确保传递 dailyId
      }"
      @submit="handleTaskAssigned"
      @refresh="handleRefresh"
    />
    <!-- 图片查看器 -->
    <el-image-viewer
      v-if="showViewer"
      @close="showViewer = false"
      :url-list="[currentImage]"
    />

    <!-- 添加任务详情弹窗 -->
    <el-dialog
      v-model="taskViewVisible"
      title="任务详情"
      width="70%"
      destroy-on-close
      class="task-detail-dialog"
    >
      <div v-if="taskDetail" class="task-detail">
        <!-- 添加任务标题 -->
        <div class="task-title">
          <h3>{{ taskDetail.title }}</h3>
        </div>

        <div class="task-info">
          <div class="info-row">
            <span>发布人：{{ taskDetail.publishUser?.realname }}</span>
            <span>发布时间：{{ formatTime(taskDetail.publishTime) }}</span>
          </div>
          <div class="info-row">
            <span>负责人：{{ taskDetail.responsibleUser?.realname }}</span>
            <span>预计时间：{{ formatTime(taskDetail.estimatedTime) }}</span>
          </div>
        </div>

        <div class="task-description">
          <h4 class="description-title">任务详情</h4>
          <div
            class="task-description-content"
            v-html="taskDetail.description"
            @click="handleMediaClick"
          ></div>
        </div>

        <!-- 添加任务状态历史 -->
        <div class="task-history" v-if="taskDetail && taskDetail.taskStateHistoryList && taskDetail.taskStateHistoryList.length">
          <h4 class="description-title">任务状态历史</h4>
          <el-timeline>
            <!-- 起始节点 -->
            <el-timeline-item
              type="primary"
              size="large"
              icon="Pointer"
              timestamp="开始"
            >
              <h5>
                任务创建
                <template v-if="taskDetail.responsibleUser">
                  <span class="arrow">→</span>
                  <span class="operator">责任人：{{ taskDetail.responsibleUser.realname }}</span>
                </template>
              </h5>
            </el-timeline-item>
            
            <!-- 中间状态变更节点 -->
            <el-timeline-item
              v-for="(history, index) in taskDetail.taskStateHistoryList"
              :key="index"
              :type="getStateType(history.state)"
              :timestamp="history.createdTime"
            >
              <div class="history-item">
                <span class="operator">{{ history.user.realname }}</span>
                <span class="arrow">→</span>
                <span class="state">{{ getStateText(history.state) }}</span>
                <div class="reason" v-if="history.stateReason" @click="handleMediaClick">
                  原因：<span v-html="processContent(history.stateReason)"></span>
                </div>
              </div>
            </el-timeline-item>
            
            <!-- 当前状态节点 -->
            <el-timeline-item
              :type="getStateType(taskDetail.state)"
              size="large"
              :icon="getStateIcon(taskDetail.state)"
            >
              <h5>当前状态：{{ getStateText(taskDetail.state) }}</h5>
            </el-timeline-item>
          </el-timeline>
        </div>
      </div>
    </el-dialog>

    <el-drawer
      v-model="detailDrawerVisible"
      title="问题反馈详情"
      size="50%"
      custom-class="daily-detail-drawer"
    >
      <div v-if="selectedReport" class="drawer-content">
        <div class="drawer-header">
          <h3>{{ selectedReport.title }}</h3>
          <span class="state-tag" :class="`state-${selectedReport.state}`">
            {{ getStateText(selectedReport.state) }}
          </span>
        </div>
        <div class="drawer-meta">
          <p>机器编号：{{ selectedReport.equipment?.equipmentName || '-' }}</p>
          <p>部件：{{ selectedReport.component?.componentName || '-' }}</p>
          <p>发生时间：{{ formatDateTime(selectedReport.happendTime) }}</p>
          <p>记录人：{{ selectedReport.user?.realname || '-' }}</p>
        </div>
        <div class="drawer-description rich-text-content" v-html="selectedReport.description" @click="handleMediaClick"></div>
        <div class="attachments" v-if="selectedReport.attachments?.length">
          <span
            v-for="file in selectedReport.attachments"
            :key="file.id || file.fileUrl"
            class="attachment"
            @click="handleDownload(file.fileUrl, file.fileName)"
          >
            📎 {{ file.fileName || '附件' }}
          </span>
        </div>
      </div>
    </el-drawer>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { ElImageViewer, ElMessageBox, ElMessage, ElTimeline, ElTimelineItem } from 'element-plus'
import Pagination from '../components/Pagination.vue'
import axios from '../plugins/axios'
import DailyEditor from '../components/DailyEditor.vue'
import TaskAssignDialog from '../components/TaskAssignDialog.vue'
import { useRouter } from 'vue-router'
// ... 其他导入 ...

const router = useRouter()  // 获取路由实例

const taskDialogVisible = ref(false)
const taskViewVisible = ref(false)
const currentReport = ref(null)
const taskDetail = ref(null)
const detailDrawerVisible = ref(false)
const selectedReport = ref(null)

// 处理分配任务按钮点击
const handleAssignTask = (report) => {
  currentReport.value = report  // 保存完整的报告数据
  taskDialogVisible.value = true
}

// 处理任务分配完成
const handleTaskAssigned = () => {
  taskDialogVisible.value = false
  router.push('/task')  // 分配完成后跳转到任务页面
}

const openDetailDrawer = (report) => {
  selectedReport.value = report
  detailDrawerVisible.value = true
}

// 搜索条件
const searchForm = ref({
  siteId: '',
  state: 0,
  equipmentIds: [],
  moduleId: '',
  componentId: '',
  keyword: '',
  startTime: '',
  endTime: ''
})

// 状态选项
const stateOptions = [
  { id: 0, name: '全部' },
  { id: 1, name: '未解决' },
  { id: 2, name: '进行中' },
  { id: 3, name: '已解决' },
  { id: 4, name: '已关闭' }
]

// 模块选项
const moduleOptions = ref([])

// 获取模块列表
const fetchModuleOptions = async () => {
  try {
    const response = await axios.get('/module/queryAll')
    if (response.data.code === 1) {
      moduleOptions.value = response.data.data
    } else {
      console.error('获取模块列表失败:', response.data.msg)
    }
  } catch (error) {
    console.error('获取模块列表请求失败:', error)
    moduleOptions.value = []
  }
}

// 部件选项
const componentOptions = ref([])

// 获取部件列表
const fetchComponentOptions = async () => {
  try {
    const response = await axios.get('/component/queryAll')
    if (response.data.code === 1) {
      componentOptions.value = response.data.data
    } else {
      console.error('获取部件列表失败:', response.data.msg)
    }
  } catch (error) {
    console.error('获取部件列表请求失败:', error)
    componentOptions.value = []
  }
}

// 机器编号选项
const machineOptions = ref([])

// 获取机器编号列表
const fetchMachineOptions = async () => {
  try {
    const response = await axios.get('/equipment-info/visible')
    if (response.data.code === 1) {
      machineOptions.value = response.data.data
    } else {
      console.error('获取机器编号列表失败:', response.data.msg)
    }
  } catch (error) {
    console.error('获取机器编号列表请求失败:', error)
    machineOptions.value = []
  }
}

// 站点选项
const siteOptions = ref([])

// 获取站点列表
const fetchSiteOptions = async () => {
  try {
    const userId = localStorage.getItem('userId')
    const response = await axios.get(`/site/findSiteByUserId/${userId}`)
    if (response.data.code === 1) {
      siteOptions.value = response.data.data
    } else {
      console.error('获取站点列表失败:', response.data.msg)
    }
  } catch (error) {
    console.error('获取站点列表请求失败:', error)
    siteOptions.value = []
  }
}

// 分页信息
const pagination = ref({
  total: 0,
  currentPage: 1,
  pageSize: 10
})

// 问题反馈列表数据
const dailyReports = ref([])
const isLoading = ref(false)

// 获取问题反馈列表数据
const fetchDailyReports = async () => {
  isLoading.value = true
  try {
    const response = await axios.post('/daily/queryByCondition', {
      ...searchForm.value,
      userId: localStorage.getItem('userId')
    })
    
    if (response.data.code === 1) {
      dailyReports.value = response.data.data
      pagination.value.total = response.data.total
    } else {
      console.error('获取问题反馈列表失败:', response.data.msg)
      dailyReports.value = []
    }
  } catch (error) {
    console.error('获取问题反馈列表请求失败:', error)
    dailyReports.value = []
  } finally {
    isLoading.value = false
  }
}

// 处理搜索
const handleSearch = () => {
  pagination.value.currentPage = 1
  searchForm.value.currentPage = 1
  fetchDailyReports()
}

// 处理重置
const handleReset = () => {
  searchForm.value = {
    siteId: '',
    state: 0,
    equipmentIds: [],
    moduleId: '',
    componentId: '',
    keyword: '',
    startTime: '',
    endTime: ''
  }
  pagination.value.currentPage = 1
  fetchDailyReports()
}

// 处理页码变化
const handlePageChange = (newPage) => {
  pagination.value.currentPage = newPage
  searchForm.value.currentPage = newPage
  fetchDailyReports()
}

// 处理每页显示数量变化
const handlePageSizeChange = (newSize) => {
  pagination.value.pageSize = newSize
  searchForm.value.pageSize = newSize
  pagination.value.currentPage = 1
  searchForm.value.currentPage = 1
  fetchDailyReports()
}

// 控制编辑器显示
const showEditor = ref(false)
const editData = ref({})

// 处理新建问题反馈
const handleCreateDaily = () => {
  editData.value = {}  // 清空编辑数据
  showEditor.value = true  // 显示编辑器
}

// 获取状态文字
const getStateText = (state) => {
  switch (state) {
    case 1:
      return '未解决'
    case 2:
      return '进行中'
    case 3:
      return '已解决'
    case 4:
      return '已关闭'
    default:
      return '未知状态'
  }
}

// 格式化时间
const formatDateTime = (dateTimeString) => {
  if (!dateTimeString) return ''
  return dateTimeString.replace('T', ' ').split('.')[0]
}

const getSummary = (html = '') => {
  if (!html) return '暂无内容'
  if (typeof window === 'undefined') return html
  const container = document.createElement('div')
  container.innerHTML = html
  const text = container.textContent || container.innerText || ''
  if (!text) return '暂无内容'
  return text.length > 120 ? `${text.slice(0, 120)}...` : text
}

// 处理附件下载
const handleDownload = (attachment, attachmentName) => {
  if (!attachment) {
    console.error('附件URL不存在')
    return
  }
  const link = document.createElement('a')
  link.href = attachment
  link.download = attachmentName || '附件'
  document.body.appendChild(link)
  link.click()
  document.body.removeChild(link)
}

// 添加图片查看器相关的状态
const showViewer = ref(false)
const currentImage = ref('')

// 合并处理图片和视频点击
const handleMediaClick = (event) => {
  const target = event.target
  
  if (target.tagName === 'IMG') {
    currentImage.value = target.src
    showViewer.value = true
  } 
  else if (target.tagName === 'VIDEO') {
    if (document.fullscreenElement) {
      document.exitFullscreen()
    } else {
      target.requestFullscreen()
    }
  }
}

// 处理编辑
const handleEdit = (report) => {
  editData.value = { ...report }  // 复制问题反馈数据到编辑对象
  showEditor.value = true  // 显示编辑器
}

// 处理删除
const handleDelete = async (report) => {
  try {
    const confirmed = await ElMessageBox.confirm(
      '确定要删除这条问题反馈吗？111',
      '警告',
      {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }
    )
    
    if (confirmed) {
      const response = await axios.delete(`/daily/${report.id}`)
      if (response.data.code === 1) {
        ElMessage.success('删除成功')
        fetchDailyReports()  // 刷新列表
      } else {
        ElMessage.error(response.data.msg || '删除失败')
      }
    }
  } catch (error) {
    console.error('删除失败:', error)
    ElMessage.error('删除失败')
  }
}

// 查看任务详情
const handleViewTask1 = async (report) => {
  try {
    const response = await axios.get(`/task/${report.id}`)
    if (response.data.code === 1) {
      taskDetail.value = response.data.data
      taskViewVisible.value = true  // 打开任务详情 Dialog
    } else {
      ElMessage.error(response.data.msg || '获取任务详情失败')
    }
  } catch (error) {
    console.error('获取任务详情失败:', error)
    ElMessage.error('获取任务详情失败')
  }
}

// 格式化时间
const formatTime = (timeString) => {
  if (!timeString) return ''
  return timeString.replace('T', ' ').split('.')[0]
}

// 添加刷新处理方法
const handleRefresh = () => {
  // 重置页码到第一页
  pagination.value.currentPage = 1
  // 重新获取列表数据
  fetchDailyReports()
}

// 添加分享处理函数
const handleShare = (id) => {
  // 构建分享链接
  const shareUrl = `${window.location.origin}/daily-detail/${id}`
  
  try {
    // 使用 Clipboard API
    navigator.clipboard.writeText(shareUrl)
    ElMessage({
      message: '链接已复制到剪贴板',
      type: 'success',
      duration: 2000
    })
  } catch (err) {
    // 如果 Clipboard API 失败，使用传统方法
    const input = document.createElement('input')
    input.value = shareUrl
    document.body.appendChild(input)
    input.select()
    document.execCommand('copy')
    document.body.removeChild(input)
    
    ElMessage({
      message: '链接已复制到剪贴板',
      type: 'success',
      duration: 2000
    })
  }
}

// 组件挂载时初始化数据
onMounted(() => {
  fetchSiteOptions()
  fetchModuleOptions()
  fetchComponentOptions()
  fetchMachineOptions()
  fetchDailyReports()
})

const isAdmin = localStorage.getItem('isAdmin') === '1'
const userId = Number(localStorage.getItem('userId'))
const role = Number(localStorage.getItem('role'))

// 获取状态类型
const getStateType = (state) => {
  switch (state) {
    case 2: return 'primary'   // 进行中
    case 3: return 'success'   // 已完成
    case 4: return 'info'      // 已关闭
    default: return 'warning'  // 其他状态
  }
}


// 获取状态图标
const getStateIcon = (state) => {
  switch (state) {
    case 2: return 'Loading'    // 进行中
    case 3: return 'Select'     // 已完成
    case 4: return 'CircleClose' // 已关闭
    default: return 'More'      // 其他状态
  }
}

// 处理内容中的链接
const processContent = (content) => {
  if (!content) return ''
  const div = document.createElement('div')
  div.innerHTML = content
  const links = div.getElementsByTagName('a')
  for (let link of links) {
    link.setAttribute('target', '_blank')
    link.setAttribute('rel', 'noopener noreferrer')
  }
  return div.innerHTML
}
</script>

<style scoped>
.daily-report-container {
  padding: 2rem;
  margin-top: 60px;
}

.page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 2rem;
}

.page-header h1 {
  margin: 0;
  color: #333;
  font-size: 1.8rem;
}

.new-report-btn {
  padding: 0.5rem 1rem;
  background-color: #0052cc;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 1rem;
  transition: background-color 0.2s;
}

.new-report-btn:hover {
  background-color: #0747a6;
}

.search-form {
  background-color: white;
  padding: 1.5rem;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  margin-bottom: 2rem;
}

.form-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  margin-bottom: 1rem;
}

.form-item {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.form-item label {
  font-size: 0.9rem;
  color: #666;
}

.form-item input,
.form-item select,
:deep(.form-item .el-select .el-input__wrapper) {
  padding: 0.5rem;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 0.9rem;
}

:deep(.form-item .el-select) {
  width: 100%;
}

.form-actions {
  display: flex;
  justify-content: flex-end;
  gap: 1rem;
  margin-top: 1rem;
}

.search-btn,
.reset-btn {
  padding: 0.5rem 1.5rem;
  border-radius: 4px;
  cursor: pointer;
  font-size: 0.9rem;
  transition: all 0.2s;
}

.search-btn {
  background-color: #0052cc;
  color: white;
  border: none;
}

.search-btn:hover {
  background-color: #0747a6;
}

.reset-btn {
  background-color: white;
  color: #666;
  border: 1px solid #ddd;
}

.reset-btn:hover {
  border-color: #0052cc;
  color: #0052cc;
}

.reports-list {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.report-item {
  background-color: white;
  border-radius: 8px;
  padding: 1.5rem;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  border-left: 4px solid #ddd;
}

.report-item.unsolved {
  border-left-color: #f56c6c;  /* 红色，表示未解决 */
}

.report-item.in-progress {
  border-left-color: #e6a23c;  /* 黄色，表示进行中 */
}

.report-item.resolved {
  border-left-color: #67c23a;  /* 绿色，表示已解决 */
}

.report-item.closed {
  border-left-color: #909399;  /* 灰色，表示已关闭 */
}

.report-header {
  margin-bottom: 1.5rem;
}

.header-main {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.5rem;
}

.header-main h3 {
  margin: 0;
  color: #172B4D;
  font-size: 1.2rem;
}

.state-tag {
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 500;
}

.state-1 {
  background-color: #fef0f0;
  color: #f56c6c;
  border: 1px solid #fbc4c4;
}

.state-2 {
  background-color: #fdf6ec;
  color: #e6a23c;
  border: 1px solid #f5dab1;
}

.state-3 {
  background-color: #f0f9eb;
  color: #67c23a;
  border: 1px solid #c2e7b0;
}

.state-4 {
  background-color: #f4f4f5;
  color: #909399;
  border: 1px solid #d3d4d6;
}

.header-tags {
  display: flex;
  gap: 0.5rem;
}

.tag {
  padding: 0.2rem 0.5rem;
  border-radius: 3px;
  font-size: 0.8rem;
}

.module-tag {
  background-color: #EAE6FF;
  color: #403294;
}

.report-info {
  background-color: #F4F5F7;
  border-radius: 4px;
  padding: 1rem;
  margin-bottom: 1.5rem;
}

.rich-text-content {
  color: #42526E;
  line-height: 1.6;
  
  :deep(img),
  :deep(video) {
    height: 160px;
    width: auto;
    object-fit: contain;
    cursor: pointer;
    transition: transform 0.3s ease;
  }
  
  :deep(img):hover,
  :deep(video):hover {
    transform: scale(1.05);
  }
  
  :deep(img):fullscreen,
  :deep(video):fullscreen {
    height: auto;
    width: auto;
    max-height: 100vh;
  }
}

.info-row {
  display: flex;
  justify-content: space-between;
  margin-bottom: 0.5rem;
  font-size: 0.9rem;
  color: #42526E;
}

.info-row:last-child {
  margin-bottom: 0;
}

.content-section {
  margin-bottom: 1.5rem;
}

.report-summary {
  color: #42526E;
  line-height: 1.6;
  margin: 0 0 0.5rem 0;
}

.text-btn {
  background: none;
  border: none;
  color: #409eff;
  cursor: pointer;
  padding: 0;
  font-size: 0.9rem;
}

.text-btn:hover {
  text-decoration: underline;
}

.content-section h4 {
  color: #172B4D;
  font-size: 1rem;
  margin: 0 0 0.5rem 0;
}

.content-section p {
  color: #42526E;
  line-height: 1.6;
  margin: 0;
}

.report-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 1rem;
  border-top: 1px solid #DFE1E6;
}

.attachments {
  display: flex;
  gap: 1rem;
}

.attachment {
  color: #0052CC;
  font-size: 0.9rem;
  cursor: pointer;
}

.attachment:hover {
  text-decoration: underline;
  color: #0747a6;
}

.daily-detail-drawer .el-drawer__body {
  padding: 20px;
}

.drawer-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1rem;
}

.drawer-meta {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 1rem;
  color: #606266;
  font-size: 0.9rem;
}

.drawer-description {
  margin-bottom: 1rem;
}

.actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-left: auto;
}

.action-btn {
  padding: 0.25rem 0.75rem;
  border: 1px solid #DFE1E6;
  background-color: white;
  border-radius: 3px;
  cursor: pointer;
  font-size: 0.9rem;
  transition: all 0.2s;
}

.action-btn.assign {
  background-color: #fff;
  color: #409EFF;
  border: 1px solid #409EFF;
}

.action-btn.assign:hover {
  background-color: #ecf5ff;
  color: #409EFF;
  border-color: #409EFF;
}

.action-btn.edit {
  color: #67C23A;
  border: 1px solid #67C23A;
}

.action-btn.edit:hover {
  background-color: #f0f9eb;
  border-color: #67C23A;
  color: #67C23A;
}

.action-btn.delete {
  color: #F56C6C;
  border: 1px solid #F56C6C;
}

.action-btn.delete:hover {
  background-color: #fef0f0;
  border-color: #F56C6C;
  color: #F56C6C;
}

.action-btn.share {
  background-color: #909399;
  margin-left: 8px;
}

.action-btn.share:hover {
  background-color: #a6a9ad;
}

.state-message {
  text-align: center;
  padding: 40px 0;
  color: #909399;
  font-size: 14px;
}

.pagination-container {
  margin-top: 20px;
  display: flex;
  justify-content: center;
}

/* 任务详情弹窗样式 */
:deep(.task-detail-dialog) {
  border-radius: 8px;
}

:deep(.task-detail-dialog .el-dialog__header) {
  padding: 20px;
  border-bottom: 1px solid #ebeef5;
  margin: 0;
}

:deep(.task-detail-dialog .el-dialog__body) {
  padding: 24px;
}

.task-detail {
  background: #ffffff;
}

.task-title {
  margin-bottom: 20px;
  padding-bottom: 16px;
  border-bottom: 1px solid #ebeef5;
}

.task-title h3 {
  margin: 0;
  font-size: 20px;
  font-weight: 600;
  color: #303133;
}

.task-info {
  background: #f8fafc;
  padding: 16px 20px;
  border-radius: 8px;
  margin-bottom: 20px;
}

.info-row {
  display: flex;
  justify-content: space-between;
  margin-bottom: 12px;
}

.info-row:last-child {
  margin-bottom: 0;
}

.info-row span {
  font-size: 14px;
  color: #606266;
}

.task-description {
  padding: 0 20px;
  margin-bottom: 20px;
}

.task-description-content {
  max-height: 60vh;
  overflow: auto;
}

.task-detail :deep(img),
.task-detail :deep(video) {
  max-width: 100%;
  max-height: 400px;
  width: auto;
  height: auto;
  object-fit: contain;
  cursor: pointer;
  display: block;
  margin: 12px auto;
}

.task-detail :deep(video) {
  width: 100%;
}

.task-footer {
  padding: 16px 20px;
  border-top: 1px solid #ebeef5;
}

.description-title {
  font-size: 16px;
  font-weight: 600;
  color: #303133;
  margin: 0 0 16px 0;
  padding-left: 10px;
  border-left: 4px solid #409eff;
  line-height: 1.4;
}

:deep(.el-button) {
  margin-left: 0;
}

.share-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 6px 12px;
  border: none;
  border-radius: 4px;
  background-color: #409eff;
  color: white;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.share-btn:hover {
  background-color: #66b1ff;
  transform: translateY(-1px);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.share-btn:active {
  transform: translateY(0);
  box-shadow: none;
}

.share-btn i {
  font-size: 16px;
}

/* 如果需要在特定情况下改变按钮颜色 */
.share-btn.success {
  background-color: #67c23a;
}

.share-btn.success:hover {
  background-color: #85ce61;
}

.task-history {
  margin-top: 20px;
  padding: 20px;
  background-color: #f8f9fa;
  border-radius: 4px;
}

.history-item {
  padding: 8px 0;
}

.operator {
  font-weight: 500;
  color: #409EFF;
}

.arrow {
  margin: 0 8px;
  color: #909399;
}

.state {
  font-weight: 500;
}

.reason {
  margin-top: 8px;
  color: #606266;
  font-size: 13px;
  line-height: 1.5;
}

:deep(.reason a) {
  color: #409EFF;
  text-decoration: none;
}

:deep(.reason a:hover) {
  color: #66b1ff;
  text-decoration: underline;
}

:deep(.reason img) {
  max-width: 100%;
  height: auto;
  cursor: pointer;
  margin: 8px 0;
}

:deep(.reason video) {
  max-width: 100%;
  height: auto;
  margin: 8px 0;
}

:deep(.el-timeline-item__node--large) {
  width: 16px;
  height: 16px;
}

:deep(.el-timeline-item__timestamp) {
  color: #909399;
  font-size: 13px;
}
</style>
